<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备件管理系统 - 批次管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .el-table__header th {
            background-color: #e1dddd !important;
        }
        .el-table__cell {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题插槽 -->
    <h2 style="display: none;"><slot name="pageTitle">批次管理</slot></h2>

    <!-- 页面头部插槽 -->
    <header class="header">
        <h2 style="margin: 0;">批次管理</h2>
    </header>

    <!-- 主体内容插槽 -->
    <main>
        <!-- 添加搜索框和新增按钮 -->
        <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
            <el-button type="primary" size="medium" @click="showAddDialog = true">新增批次记录</el-button>
            <div style="display: flex; gap: 10px;">
                <el-input v-model="searchQuery" placeholder="请输入批次ID或备件ID" style="width: 200px;"></el-input>
                <el-button type="info" size="medium" @click="logout">退出</el-button>
            </div>
        </div>

        <!-- 表格部分 -->
        <el-table :data="paginatedBatchManagementList" border style="width: 100%; table-layout: fixed;">
            <el-table-column prop="index" label="序号"></el-table-column>
            <el-table-column prop="batchid" label="ID"></el-table-column>
            <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="batchNumber" label="批次号"></el-table-column>
            <el-table-column prop="entryDate" label="入库日期"></el-table-column>
            <el-table-column prop="unitPrice" label="单价"></el-table-column>
            <el-table-column prop="totalPrice" label="总价"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <el-button size="mini" type="primary" icon="EditPen" @click="editBatchManagement(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" icon="Delete" @click="deleteBatchManagement(scope.row.batchid)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <el-pagination
                layout="prev, pager, next"
                :total="computedBatchManagementList.length"
                v-model:current-page="currentPage"
                :page-size="pageSize"
                style="margin-top: 20px; justify-content: center;">
        </el-pagination>

        <!-- 新增批次记录弹窗 -->
        <el-dialog v-model="showAddDialog" title="新增批次记录" width="30%">
            <el-form :model="newBatchManagement" label-position="left" label-width="100px">
                <el-form-item label="备件ID">
                    <el-input v-model="newBatchManagement.sparepartid"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="newBatchManagement.quantity"></el-input>
                </el-form-item>
                <el-form-item label="批次号">
                    <el-input v-model="newBatchManagement.batchNumber"></el-input>
                </el-form-item>
                <el-form-item label="入库日期">
                    <el-date-picker v-model="newBatchManagement.entryDate" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="单价">
                    <el-input v-model="newBatchManagement.unitPrice"></el-input>
                </el-form-item>
                <el-form-item label="总价">
                    <el-input v-model="newBatchManagement.totalPrice"></el-input>
                </el-form-item>
                <div style="text-align: right;">
                    <el-button @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="addBatchManagement">添加</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 编辑批次记录弹窗 -->
        <el-dialog v-model="showEditDialog" title="编辑批次记录" width="30%">
            <el-form :model="editBatch" label-position="left" label-width="100px">
                <el-form-item label="备件ID">
                    <el-input v-model="editBatch.sparepartid"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="editBatch.quantity"></el-input>
                </el-form-item>
                <el-form-item label="批次号">
                    <el-input v-model="editBatch.batchNumber"></el-input>
                </el-form-item>
                <el-form-item label="入库日期">
                    <el-date-picker v-model="editBatch.entryDate" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="单价">
                    <el-input v-model="editBatch.unitPrice"></el-input>
                </el-form-item>
                <el-form-item label="总价">
                    <el-input v-model="editBatch.totalPrice"></el-input>
                </el-form-item>
                <div style="text-align: right;">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="saveEdit">保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </main>

    <!-- 底部固定 -->
    <footer class="footer">
        &copy; 2025 备件管理系统 - 版权所有
    </footer>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>

<script>
    const { createApp } = Vue;
    const { EditPen, Delete } = ElementPlusIconsVue;
    const apiClient = axios.create({
        //本地地址
        //baseURL: 'http://localhost:8086',
        //服务器地址
        baseURL: 'http://8.137.85.243:8086',
        timeout: 5000
    });

    const app = createApp({
        data() {
            return {
                batchManagementList: [],
                newBatchManagement: { sparepartid: null, quantity: null, batchNumber: '', entryDate: null, unitPrice: null, totalPrice: null },
                editBatch: { sparepartid: null, quantity: null, batchNumber: '', entryDate: null, unitPrice: null, totalPrice: null },
                searchQuery: '',
                showAddDialog: false,
                showEditDialog: false, // 控制编辑弹窗
                currentPage: 1,
                pageSize: 10
            };
        },
        computed: {
            computedBatchManagementList() {
                return this.batchManagementList
                    .filter(batch =>
                        batch.batchid.toString().includes(this.searchQuery.toLowerCase()) ||
                        batch.sparepartid.toString().includes(this.searchQuery.toLowerCase()) ||
                        batch.batchNumber.toLowerCase().includes(this.searchQuery.toLowerCase())
                    )
                    .map((batch, index) => ({
                        index: index + 1,
                        ...batch
                    }));
            },
            paginatedBatchManagementList() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.computedBatchManagementList.slice(start, end);
            }
        },
        mounted() {
            this.loadBatchManagement();
        },
        methods: {
            async loadBatchManagement() {
                const res = await apiClient.get('/api/batchmanagement/listall');
                this.batchManagementList = res.data;
            },
            async addBatchManagement() {
                if (!this.newBatchManagement.sparepartid || !this.newBatchManagement.quantity || !this.newBatchManagement.batchNumber) {
                    alert('请填写完整信息');
                    return;
                }
                try {
                    await apiClient.post('/api/batchmanagement/insert', this.newBatchManagement);
                    this.newBatchManagement = { sparepartid: null, quantity: null, batchNumber: '', entryDate: null, unitPrice: null, totalPrice: null };
                    this.showAddDialog = false;
                    this.loadBatchManagement();
                    alert('新增成功');
                } catch (error) {
                    alert('新增失败，请重试');
                }
            },
            cancelAdd() {
                this.newBatchManagement = { sparepartid: null, quantity: null, batchNumber: '', entryDate: null, unitPrice: null, totalPrice: null };
                this.showAddDialog = false;
            },
            async deleteBatchManagement(id) {
                if (!confirm('确定删除？')) return;
                await apiClient.delete(`/api/batchmanagement/delete/${id}`);
                this.loadBatchManagement();
            },
            editBatchManagement(row) {
                this.editBatch = { ...row };
                this.showEditDialog = true;
            },
            async saveEdit() {
                try {
                    await apiClient.put(`/api/batchmanagement/update/${this.editBatch.batchid}`, this.editBatch);
                    this.loadBatchManagement();
                    this.showEditDialog = false;
                    alert('更新成功');
                } catch (error) {
                    alert('更新失败，请重试');
                }
            },
            cancelEdit() {
                this.showEditDialog = false;
            },
            logout() {
                window.location.href = '/dashboard.html';
            }
        }
    });

    app.use(ElementPlus);
    app.component('EditPen', EditPen);
    app.component('Delete', Delete);
    app.mount('#app');
</script>
</body>
</html>